<template>
  <div id="main"></div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import 'echarts-gl'

import { onMounted } from 'vue'
onMounted(() => {
  getList()
})
const getList = () => {
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option

  var data = []
  // Parametric curve
  // for (var t = 0; t < 25; t += 0.001) {
  //   var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t)
  //   var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t)
  //   var z = t + 2.0 * Math.sin(75 * t)
  //   data.push([x, y, z])
  // }
  console.log(data.length)
  option = {
    tooltip: {},
    backgroundColor: '#fff',
    visualMap: {
      show: false,
      dimension: 2,
      min: 0,
      max: 30,
      inRange: {
        color: [
          '#313695',
          '#4575b4',
          '#74add1',
          '#abd9e9',
          '#e0f3f8',
          '#ffffbf',
          '#fee090',
          '#fdae61',
          '#f46d43',
          '#d73027',
          '#a50026'
        ]
      }
    },
    xAxis3D: {
      type: 'value',
      name: '方位'
    },
    yAxis3D: {
      type: 'value',
      name: '位移'
    },
    zAxis3D: {
      type: 'value',
      name: '井深',
       range: [0, 30]
    },
    grid3D: {
      // viewControl: {
      //   // projection: 'orthographic'
      // }
      viewControl: {
        rotateSensitivity: 0, // 不能旋转
        zoomSensitivity: 0 // 不能缩放
      }
    },
    series: [
      {
        type: 'line3D',
        data: [
          [1, 1, 1],
          [1, 2, 3],
          [2, 2, 3],
          [2, 3, 3],
          [3, 3, 1]
        ],
        smooth: true,
        lineStyle: {
          width: 4
        }
      }
    ]
  }

  option && myChart.setOption(option)
}
</script>
<style scoped lang="scss">
#main {
  height: 800px;
  width: 1000px;
}
</style>
